<template>
  <div class="scrool">
      <div id="zrender-canvas"></div>
  </div>
  <div class="text" v-if="show">hello</div>
</template>

<script setup>
/* eslint-disable */
import {onMounted,ref, reactive,computed} from "vue"
import * as zrender from 'zrender'
import {createCircle,createSector,creatText,creatImg} from '@/components/charts/basecharts'
import {options} from '@/components/charts/data'

const zr = ref(null)
const group = ref({})
const group4 = ref({})
const group5 = ref({})
const datas = reactive({
      step:30,  //梯形每一层步进的半径大小
      points:[250,250],   //大圆的圆心坐标
      groupgap:10,
      angle:270,   //其实渲染角度
      left:0,
      top:0
})
const pageoptions =  JSON.parse( JSON.stringify(options)) 
const neeoption = JSON.parse( JSON.stringify(options)) 
const show = ref(false)

const left = computed(() => {
  const number = datas.left
  return `${number}px`
})
// top位置
const top = computed(() => {
  const number = datas.top
  return `${number}px`
})
const mousemove=(event)=> {
  console.log(event,'event')
  let {clientX,clientY} = event
  datas.left = clientX
  datas.top = clientY
  show.value = true
}
const mouseOut = ()=> {
  show.value = false
}

// 计算角度  根据不同的角度象限去判断应该加还是减去
function calcCoordinate(startPoint, r, angle,gap=0) {
//  angle = angle%360
let qAngle
if (angle >= 0 && angle < 90) {
  qAngle = angle
} else if (angle >= 90 && angle < 180) {
  qAngle = 180 - angle
} else if (angle >= 180 && angle < 270) {
  qAngle = angle - 180
} else {
  qAngle = 360 - angle
}
 // 第二步:计算坐标增量
 const _x = Math.cos((qAngle * Math.PI) / 180) * r
 const _y = Math.sin((qAngle * Math.PI) / 180) * r
 // 第三步:求未知点坐标
let result
const [x, y] = startPoint
if (angle >= 0 && angle < 90) {
  result = [x + _x+gap, y + _y+gap]
} else if (angle >= 90 && angle < 180) {
  result = [x - _x-gap, y + _y+gap]
} else if (angle >= 180 && angle < 270) {
  result = [x -_x-gap, y - _y - gap]
} else {
    result = [x + _x + gap, y - _y -gap]
}  
  return result
}

function getangle(angle) {
let qAngle // 象限角
if (angle >= 0 && angle < 90) {
  qAngle = angle
} else if (angle >= 90 && angle < 180) {
  qAngle = 180 - angle
} else if (angle >= 180 && angle < 270) {
  qAngle = angle - 180
} else{
  qAngle = 360 - angle
}
return qAngle 
}
// 内圆环
function getinner() {
 let innerCircle = createCircle(datas.points,35,{stroke:'#9fe9fd',lineWidth:15,shadowColor:"#cccccc",shadowBlur:50})
 let innerCircle2 = createCircle(datas.points,30,{stroke:'none',fill:'#78befe'})
 let innerCircle3 = createCircle(datas.points,23,{stroke:'#fff',fill:'none'})

let Sector1= createSector(datas.points,40,45,15*Math.PI / 180,40*Math.PI/180,{fill:'#33c1e3',stroke:"none",shadowBlur:1})
let Sector2= createSector(datas.points,40,45,65*Math.PI / 180,145*Math.PI / 180,{fill:'#33c1e3',stroke:"none",shadowBlur:1})
let Sector3= createSector(datas.points,40,45,180*Math.PI / 180,215*Math.PI / 180,{fill:'#61dbf1',stroke:"none",shadowBlur:1})
let Sector4= createSector(datas.points,40,45,245*Math.PI / 180,340*Math.PI / 180,{fill:'#70e2f5',stroke:"none",shadowBlur:1})
// 白色圆圈的扇形部分
let Sector5= createSector(datas.points,21,26,35*Math.PI / 180,85*Math.PI/180,{fill:'#fff',stroke:"none"})
let Sector6= createSector(datas.points,21,26,120*Math.PI / 180,170*Math.PI / 180,{fill:'#fff',stroke:"none"})
let Sector7= createSector(datas.points,21,26,190*Math.PI / 180,260*Math.PI / 180,{fill:'#fff',stroke:"none"})
let Sector8= createSector(datas.points,21,26,290*Math.PI / 180,350*Math.PI / 180,{fill:'#fff',stroke:"none"})
// 图片大小
let [width,height] = [30,30]
let img = creatImg(require('@/assets/logo.png'),[250 - (width / 2),250 - (height/2)],[width,height])
group5.value.add(innerCircle)
group5.value.add(innerCircle2)
group5.value.add(innerCircle3)

group5.value.add(img)
group5.value.add(Sector1)
group5.value.add(Sector2)
group5.value.add(Sector3)
group5.value.add(Sector4)
group5.value.add(Sector5)
group5.value.add(Sector6)
group5.value.add(Sector7)
group5.value.add(Sector8)
zr.value.add(group5.value)
}
const init = ()=> {
  zr.value = zrender.init(document.getElementById('zrender-canvas'))
  group.value = new zrender.Group()
  group4.value = new zrender.Group()
  group5.value = new zrender.Group()

  for(let i=0;i<7;i++) {
      let circle = createCircle(datas.points,30+i*datas.step,{lineDash:[5],stroke:'#e3e7e9'})
      group.value.add(circle)   
  }
  // 定义梯形
  var triangleSelf = zrender.Path.extend({
      type: 'triangleSelf',
      shape:{
          x: 10,
          y: 0,
          width: 0,
          height: 0
      },
      buildPath: function (ctx, shape) {
          let rotate = shape.rotate
          let evetyAngle = shape.evetyAngle

          let start = (rotate % 360) * Math.PI / 180
          let end = ((rotate + evetyAngle) % 360) * Math.PI / 180

          console.log(start,end)

          // console.log(rotate,rotate+evetyAngle)
          let [x,y] = calcCoordinate(datas.points,shape.r,rotate,shape.gap)
          let [x1,y1] = calcCoordinate(datas.points,shape.r,rotate+evetyAngle,shape.gap)
          let [x2,y2] = calcCoordinate(datas.points,shape.r+datas.step,rotate,shape.gap)
          let [x3,y3] = calcCoordinate(datas.points,shape.r+datas.step,rotate+evetyAngle,shape.gap)
          // ctx.save()
          ctx.beginPath();
          ctx.moveTo(x,y);
          ctx.lineTo(x1,y1); 
          ctx.arc(datas.points[0],datas.points[1],shape.r,start,end)
          ctx.lineTo(x3,y3);
          ctx.arc(datas.points[0],datas.points[1],shape.r+datas.step,end,start,true)
          // ctx.restore()
          // ctx.lineTo(x2,y2);
          // ctx.closePath(); // 闭
     }
  })
  function renders(options,{r1,r2}) {
   let sumCount = options.reduce((sum,pre)=> {return sum+=pre.data.length},0)
   let evetyAngle =0
   if(sumCount>0) {
    if(options.length>1) evetyAngle = (360 - (1.1*sumCount)-datas.groupgap*(options.length+1)) / sumCount 
    else evetyAngle = (360 - (1.1*sumCount)) / sumCount  
   }
   console.log(evetyAngle,'evetyAngle')
   for(let k=0;k<options.length;k++) {   //梯形组
    // 计算出cx，cy：起始点，r:半径1；r0半径2；startAngle；endAngle其实终止角度
    let index = 0,sum = 0,startAngle =  0,endAngle = 0
    if(k>0) {
        index = k
        for(let p=0;p<index;p++) {
          sum+= options[p].data.length
        }
        startAngle = (datas.angle + sum*evetyAngle + 1.1*sum) 
        endAngle =   (datas.angle + (sum + options[k].data.length)*evetyAngle + 1.1*(sum + options[k].data.length))
      } else {
         sum = options[k].data.length
         startAngle = datas.angle
         endAngle = (datas.angle + sum*evetyAngle + 1.1*sum-1)
      }
    // 盛放文字和环装扇形的组
    let outcirclegroup = new zrender.Group()
    // 扇形部分
    let setgroup = new zrender.Group({id:'setgroup'})
    let circle = createSector(datas.points,r1,r2,startAngle* Math.PI / 180,endAngle* Math.PI / 180,{fill:options[k].color,stroke:'none'})
    let cirText = creatText(options[k].name,options[k].textColor,'16px')
    // cirText.position = calcCoordinate(datas.points,r1+5,startAngle )
    let avgangle = (startAngle + (endAngle - startAngle) / 2) % 360
    if(avgangle >90&& avgangle<270) {
       cirText.position = calcCoordinate(datas.points,r1+20,(startAngle + (endAngle - startAngle) / 2))
    } else if((avgangle>0 && avgangle<90) || (avgangle > 290 && avgangle<360)) {
       cirText.position = calcCoordinate(datas.points,r1+10,(startAngle + (endAngle - startAngle) / 2))  
    }else {
      cirText.position = calcCoordinate(datas.points,r1+10,(startAngle + (endAngle - startAngle) / 2))  

    }
    console.log((startAngle + (endAngle - startAngle) / 2) % 360)
    console.log(calcCoordinate(datas.points,r1+5,(startAngle + (endAngle - startAngle) / 2)))
    outcirclegroup.add(circle)
    outcirclegroup.add(cirText)
    // 文字所处的半径处，计算所需的这角度
    // cirText.rotation = getangle((startAngle + endAngle)/2)* Math.PI / 180
    setgroup.add(outcirclegroup)
    for(let j=0;j<options[k].data.length;j++) {  //成一个长条梯形
         let textColor =  options[k].data[j].value>2 ? options[k].colors[options[k].colors.length-1] : '#000000'
        let Text = creatText(options[k].data[j].text, textColor)   //每一个长条梯形的文字
      for(let i=0;i<options[k].data[j].value;i++) {
          let color = options[k].colors
          // let rotate = j>0 ? angle + 8*j + 5*j : angle
          // 此处1.1是为了梯形之间的间隙

          // 前n-1个data所有长度加起来的和
          let index = 0,sum = 0
          if(k>0) {
            index = k
            for(let p=0;p<index;p++) {
              sum+= options[p].data.length
            }
          } 
          let textsetGroup = new zrender.Group()
          let rotate = (j + sum)>0 ? datas.angle +  evetyAngle*(j + sum) + 1.1*(j+sum) : datas.angle

          let [x,y] = calcCoordinate(datas.points,r2,datas.angle+evetyAngle*(j + sum)+ 1.1*(j + sum))

          Text.position = [x,y]
          Text.rotation = getangle(rotate+evetyAngle/2) * (Math.PI / 180)
          let text = options[k].data[j].text
          //一个sf对应一个梯形
          let sf = new triangleSelf({   
          shape: {
                  x: datas.points[0],
                  y: datas.points[1],
                  r:r2+datas.step*i,
                  // gap:0.5*i,
                  gap:0,
                  rotate,
                  evetyAngle
              },
          style: {
              stroke:'none',
              fill: text ? color[i] : 'none',
              lineWidth: 2,
              text,
              value:options[k].data[j].value
          },
        })
        // sf.on('mouseover',(e)=> {
        //   console.log('21',e)
        //   sf.attr('style',{opacity:0.5})
        // })
       
        textsetGroup.add(sf)
        textsetGroup.add(Text)
  
        setgroup.add(textsetGroup)
        setgroup.attr({
             startAngle,
             endAngle,
             id:'setgroup'+k
        })
        // textsetGroup.on('mousemove',(e)=> {
        //   // console.log(e.target.style)
        //     let {clientX,clientY} = e.event
        //     datas.left = clientX
        //     datas.top = clientY
        //     show.value = true
        // }).on('mouseout',mouseOut)
        textsetGroup.on('click',(e)=> {
           console.log(e,'e')
          //  e.target.attr('style',{
          //    opacity:0.3
          //  })
        })
      } 
      group4.value.add(setgroup)
  }
} 
group4.value.eachChild((child,index)=> {
      console.log(child,'child',child.id,index)
      child.origin = datas.points
      if(options.length>1) child.rotation = (datas.groupgap * options.length - (index*datas.groupgap))*Math.PI / 180  
   })
  
  // 绘制内部的图像部分
  // console.log(group4.value)
  zr.value.add(group.value)
  zr.value.add(group4.value)

  // getinner()
}
  renders(options,{r1:40,r2:70})
}

onMounted(() => {
  init()
})
</script>

<style scoped>
.scrool {
  position: relative;
  height: 600px;
  width: 800px;
  border: 1px solid #ccc;
  border-radius: 10px;
}
#zrender-canvas {
  width:500px;
  height:500px;
}
.text {
  position: absolute;
  border: 1px solid #f40;
  left:v-bind(left);
  top:v-bind(top);
}


</style>